<template>
	<div id="shopping">
		<!--数据加载动画-->
		<Load v-if="loading"></Load>
		<!--价格变动-->
		<el-dialog
		  title="价格调整通知"
		  :visible="priceChange">
		  <p>当前实际价格为：￥{{realAdultFacePrice}} , 继续购买请点击确定按钮。</p>	
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="cancelBuy">取 消</el-button>
		    <el-button @click="sureBuy" type="primary">确 定</el-button>
		  </span>
		</el-dialog>
		<!--搜索条件-->		
		<div class="query">
			<div>
				<FlightCityInput v-model="query.deptCity"/>
				
			</div>
			<div @click="exchange"><span class="iconfont">&#xe61c;</span></div>
			<div>
				<FlightCityInput v-model="query.arrCity"/>
	
			</div>
			<div>
				<el-date-picker
			      v-model="query.deptStartDate"
			      class="date"
			      type="date"
			      size="small"
			      placeholder="选择日期">
			   </el-date-picker>
			</div>
			<div>
				<el-select v-model="query.seatClass" size="small" class="limit">
				    <el-option
				      v-for="item in type1"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				</el-select>
				
			</div>
			<div>
				<el-select v-model="query.adtCnt" size="small" class="limit">
				    <el-option
				      v-for="item in type2"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				</el-select>				
			</div>
			<div class="btnWarp">
				<el-button @click="search" class="search" size="small">搜索</el-button>
			</div>
		</div>
		<!--搜索结果-->
		<div class="main">
			<!--日期和排序-->
			<div v-if="noRes" class="panel">
				<FrontAndBack @getDate="getDate" :date='query.deptStartDate'></FrontAndBack>
				<div class="sort">
					<div @click="departSort" class="flex">
						<span>起飞时间</span>
						<SortSign :type='sortWay.depart'></SortSign>
					</div>
					<div @click="priceSort" class="flex">
						<span>价格</span>
						<SortSign :type='sortWay.price'></SortSign>
					</div>
					<div>共{{data.length}}条航班信息</div>
				</div>
			</div>
			<div v-if="noRes" class="content">
				<div v-for="item in data">
					<div class="item">
						<div class="airline">
							<div class="airSign">
								<img :src="'/static/airlines/' + getImgUrl(item.segments[0].flightNo)" alt="" />
							</div>
							<div>
								<p>
									<span class="airlineName">{{item.segments[0].airlineChn}}</span>
									<span>{{item.segments[0].flightNo}}</span>
								</p>
								<p class="model">{{item.segments[0].planeModel}}</p>
							</div>
						</div>
						<div class="routeTime">
							<div class="deptDate">
								<p class="time">{{item.segments[0].fromDate|getTime}}</p>
								<p>{{item.segments[0].fromAirportCn}}{{item.segments[0].fromTower}}</p>
							</div>
							<div class="interval">
								<p class="duration">{{duration(item.segments)|getHour}}</p>
								<p class="to">
									<img src="../../../images/shopping/arrows.png" alt="" />
								</p>
							</div>
							<div class="arrDate">
								<p class="time">{{item.segments[item.segments.length-1].toDate|getTime}}</p>
								<p>{{item.segments[item.segments.length-1].fromAirportCn}}{{item.segments[item.segments.length-1].fromTower}}</p>
							</div>
						</div>
						<div class="food" @mouseenter="endorseS(item.prices[0],item)" @mouseleave="endorseH(item.prices[0])">
							<p class="endorse">退改签</p>
							<div class="endorseRules" v-if="item.prices[0].show">
								<p class="tag">退改签规则</p>
								<li class="ruleItem" v-for="rule in endorseRules">
									<div>{{rule.title}}</div>
									<div>{{rule.content}}</div>
								</li>
							</div>
						</div>
						<div class="extraFee">
							<p>基建+燃油</p>
							<p class="money">￥{{item.prices[0].adultAirportFee}}+￥{{item.prices[0].adultFuelFee}}</p>
						</div>
						<div class="jiage">
							<p class="price">
								<span>￥{{item.prices[0].adultFacePrice}}</span>
								<!--<span class="ruleSign" v-if="item.prices[0].cabinList[0].rule=='notinrule'">
									{{item.prices[0].cabinList[0].rule|rule}}
								</span>-->
							</p>
							<p class="disCount">{{item.prices[0].cabinList[0].cabinRank|cabinRank}} {{item.prices[0].cabinList[0].discount/10}}折</p>
						</div>
						<div class="handle">
							<p>
								<el-button @click="preDing(item)" class="preDing">预订</el-button>
							</p>
							<p class="showHide" @click="showHide(item)" v-if="item.prices.length>1">
								<span v-if="!item.show">展开舱位</span>
								<span v-if="item.show">收起舱位</span>
								<span class="iconfont" v-if="!item.show">&#xe6f2;</span>
								<span class="iconfont" v-if="item.show">&#xe7a1;</span>
							</p>
						</div>
					</div>
					<!--隐藏部分的舱位信息-->
					<div class="seatWarp" v-if="item.show">
						<div class="item" v-for="(price,index) in item.prices" v-if="index!=0">
							<div class="cang">
								<p>
									<span>{{price.cabinList[0].cabinRank|cabinRank}}{{price.cabinList[0].discount/10}}折</span>									
								</p>
							</div>
							<div class="endorse">
								<span>退改签</span>
							</div>
							<div class="price">
								<span>￥{{price.adultFacePrice}}</span>
								<!--<span class="ruleSign" v-if="price.cabinList[0].rule=='notinrule'">
									{{price.cabinList[0].rule|rule}}
								</span>-->
							</div>
							<div class="hand">								
								<div>
									<el-button @click="preDing(item,index)" class="preDing">预订</el-button>
									<p>剩余{{price.cabinList[0].seatCount}}张</p>
								</div>
							</div>							
						</div>						
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import main from './main';
	export default {
		...main
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	@import '../../../style/mixin.scss';
	@import "./style.scss";
</style>